<template>
  <div class="btn-bar">
    Generate random data:
    <button type="success" @click="generateData">Generate</button>
  </div>

  <div class="vl-con" ref="rlist">
    <InfiniteList  v-model:data="data" :width="'100%'" :scrollToIndex="scrollToIndex" :height="500" :itemSize="60"
      :debug="debug" v-slot="{ item, index }">
      {{ item }}
    </InfiniteList>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import InfiniteList from 'vue3-infinite-list';
const debug = ref(false);
let data = ref(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']);
let scrollToIndex = ref(4);
const generateData = () => {
  if(scrollToIndex.value == 4){
    scrollToIndex.value = 1;
    data.value = [1,2,3,4,5,6,7,8,9,8,7,6,5,4,3,2,1];
  }else{
    data.value = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0];
  }
};
let rlist = ref();
onMounted(()=>{
  // setInterval(()=>{
  //   let offsetTop =  rlist.value.children[0].scrollTop;
  //   rlist.value.children[0].scrollTop = offsetTop+=10;

    
  //   if(offsetTop - rlist.value.children[0].scrollTop >= 10){
  //     let c = JSON.parse(JSON.stringify(data.value));
  //     let a = c.splice(0,1);
  //     c.push(a[0]);
  //     data.value = c;
  //     scrollToIndex.value = 1;
  //   }
      
  // },50)
})
</script>